<template>
  <el-card shadow="hover">
    <!-- 
      lazy 开启懒加载
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 指定data数据结构
        children 属性代表子菜单列表
        hasChildren 属性代表是否拥有子菜单
      row-key="id" 渲染每一行元素的key属性取值
      :load="load" 点击加载子菜单触发的函数
     -->
    <el-table
      :data="categoryList"
      border
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :row-key="setRowKey"
      :load="load"
    >
      <el-table-column
        label="分类id"
        prop="id"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column label="分类名称" prop="name"></el-table-column>
      <el-table-column width="250" align="center">
        <template #header>
          <el-input
            placeholder="按 Enter 键添加一级分类"
            v-model.trim="categoryName"
            @keyup.enter="addCategory1"
          />
        </template>

        <template #default>
          <el-button type="primary" size="small" :icon="Plus"></el-button>
          <el-button type="warning" size="small" :icon="Edit"></el-button>
          <el-button type="danger" size="small" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import {
  getCategory1ListApi,
  getCategory2ListApi,
  getCategory3ListApi,
  addCategory1Api,
} from "@/api/product/category";
import type {
  CategoryData,
  CategoryDataList,
} from "@/api/product/models/categoryModels";

defineOptions({
  name: "Category",
});

// 2. 添加分类
const categoryName = ref("");

const addCategory1 = async () => {
  if (!categoryName.value) return;

  await addCategory1Api(categoryName.value);

  ElMessage.success("添加一级分类成功");

  getCategory1List();

  categoryName.value = "";
};

// 1. 分类列表数据展示
const categoryList = ref<CategoryDataList>([]);

const getCategory1List = async () => {
  const res = await getCategory1ListApi();
  categoryList.value = res.map((category) => {
    return {
      ...category,
      hasChildren: true, // 这个属性代表是否有子菜单，才会显示 >
      level: 1, // 代表分类等级
    };
  });
};

onMounted(getCategory1List);

const setRowKey = (row: CategoryData) => {
  return `${row.level}-${row.id}`;
};

const load = async (
  row: CategoryData,
  _treeNode: unknown,
  resolve: (data: CategoryDataList) => void
) => {
  /*
    row 当前点击整行数据
    treeNode table渲染这行数据属性
    resolve 函数
      resolve(data) 调用函数传递的参数，将来就会给当前函数数据row.children添加上  
        row.children = data;
  */

  let res;
  // 点击一级分类，获取二级分类数据
  if (row.level === 1) {
    res = await getCategory2ListApi(row.id);
  } else {
    // 点击二级分类，获取三级分类数据
    res = await getCategory3ListApi(row.id);
  }
  const categoryList = res.map((item) => {
    return {
      ...item,
      hasChildren: row.level !== 2,
      level: row.level + 1,
    };
  });
  resolve(categoryList);
};
</script>

<style scoped lang="scss"></style>
